<!-- Cygnus ProductView CSS -->
<link href="/DesktopModules/NBright/NBrightBuy/Themes/Cygnus/css/NBS_ProductView.css" rel="stylesheet">

<!-- jQuery Validation http://jqueryvalidation.org/ -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>

<!-- Ajax for wishlist -->
<script src="/DesktopModules/NBright/NBrightBuy/Themes/config/js/jquery.genxmlajax.js" type="text/javascript"></script>
<script src="/DesktopModules/NBright/NBrightBuy/Themes/config/js/nbbitemlist.js" type="text/javascript"></script>

<!-- Required for Masonry Grid http://desandro.github.io/imagesloaded/ -->
<script type="text/javascript" src="/DesktopModules/NBright/NBrightBuy/Themes/Cygnus/js/imagesloaded.pkgd.min.js"></script>

<!-- Masonry Grid http://masonry.desandro.com -->
<script type="text/javascript" src="/DesktopModules/NBright/NBrightBuy/Themes/Cygnus/js/masonry.pkgd.min.js"></script>

<script type="text/javascript">
    // Product details validation
    $(document).ready(function () {
        $('.modelsradio input').attr('required', '');// Add required attribute to field

        // ------------------------------------------------------------------------------
        // ---START SECTION ----THIS SECTION WILL NEED MOVING INTO THE DETAIL TEMPLATE, SO WE CAN USE RESOURCEKEY TOKEN --------------
        // ------------------------------------------------------------------------------
        $('.addtobasket').click(function (e) { // Validate the requirement

            if (!validateField(".modelsradio input", "Please choose from the available product models")) {
                e.preventDefault();
            }

            /// extra tests can be added here.....

        });
        // ------------------------------------------------------------------------------
        // ---END SECTION---------------------------------------------------------------------------
        // ------------------------------------------------------------------------------

    });

    var def = "black";

    function validateField(fieldselector, message) {

        if (!$("#Form").validate({
            errorPlacement: function (error, element) {
                if (message == '') {
                    error.appendTo(".alertmessage");
                } else {
                    $(".alertmessage").append(message);
                }
            },
            errorClass: "invalid",
            validClass: "success"
        }).element(fieldselector)) {
            showNotification('teal'); // colors defined in cygnus.css
            return false;
        };
        return true;
    }

    function showNotification(color) {
        $("#notification").removeClass(def);
        $("#notification").addClass(color);
        def = color;
        $("#notification").fadeIn("fast");
        $(".win8-notif-button").click(function () {
            $(".notification").fadeOut("slow");
        });
    }

</script>
